<template>
  <div class="mod-api__salary">
    <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()">
      <el-form-item>
        <el-select v-model="state.dataForm.userId" value-key="" placeholder="请选择员工" clearable filterable @change="">
          <el-option v-for="item in xczxtrt" :key="item.id" :label="item.realName" :value="item.id"> </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select v-model="state.dataForm.isPass" value-key="" placeholder="请选择结算状态" clearable filterable @change="">
          <el-option key="" label="全部" value=""> </el-option>
          <el-option key="1" label="待审核" value="1"> </el-option>
          <el-option key="2" label="已结算" value="2"></el-option>
          <el-option key="3" label="已失效" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select v-model="state.dataForm.isPay" value-key="" placeholder="请选择打款状态" clearable filterable @change="">
          <el-option key="" label="全部" value=""> </el-option>
          <el-option label="已打款" :value="true"> </el-option>
          <el-option label="未打款" :value="false"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="state.getDataList()">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-upload :on-success="successHandle" :action="apiurl + '/api/salary/exportIn'" class="h100 w100 text-center dxcvgdfgfyhgf" accept=".xlsx" drag>
          <div>
            <el-button type="primary">导入</el-button>
          </div>
        </el-upload>
      </el-form-item>
      <!-- <el-form-item>
        <el-button v-if="state.hasPermission('api:salary:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>
      </el-form-item> -->
      <el-form-item>
        <el-button v-if="state.hasPermission('api:salary:delete')" type="danger" @click="state.deleteHandle()">删除</el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="doanwetr">下载模版</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="state.dataListLoading" :data="state.dataList" border @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>

      <el-table-column prop="companyName" label="公司名称" header-align="center" align="center" width="200"> </el-table-column>
      <el-table-column prop="month" label="月份" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="companyNo" width="100" label="岗位/工号" header-align="center" align="center"> </el-table-column>

      <el-table-column prop="realName" label="姓名" header-align="center" align="center"> </el-table-column>

      <el-table-column prop="companyTime" width="100" label="入职日期" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="leaveTime" width="100" label="离职日期" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="workDay" width="100" label="出勤天数" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="overTime" width="100" label="平时加班" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="weekOverTime" width="100" label="周末加班" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="jobDay" width="100" label="工时小计" header-align="center" align="center"> </el-table-column>

      <el-table-column prop="inviteRealName" width="100" label="上级" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="twoRealName" width="100" label="二级" header-align="center" align="center"> </el-table-column>

      <el-table-column prop="mealBalance" label="餐补费" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="mealUp" label="扣餐费" header-align="center" align="center"> </el-table-column>

      <el-table-column prop="hydropower" width="100" label="住宿水电" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="later" width="100" label="扣迟到缺卡" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="transfer" label="转账费" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="taxation" label="税费3%" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="otherTake" label="其它扣款" width="100" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="otherSubsidy" label="其它补贴" width="100" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="insure" label="保险" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="borrow" label="借资" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="total" label="总扣款" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="balance" label="应发工资" width="100" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="wages" label="实际工资" width="100" header-align="center" align="center"> </el-table-column>
      <el-table-column prop="remark" label="已发工资/备注" width="200" header-align="center" align="center"> </el-table-column>

      <el-table-column label="操作" fixed="right" header-align="center" align="center" width="220">
        <template v-slot="scope">
          <el-button type="primary" link @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
          <el-tooltip v-if="scope.row.isPass != 2" class="box-item" effect="dark" content="点击结算会分佣给经纪人" placement="top-start">
            <el-button type="primary" link @click="jiesuan(scope.row)">结算</el-button>
          </el-tooltip>

          <el-tooltip class="box-item" effect="dark" content="确认给员工打款" placement="top-start">
            <el-button type="primary" link @click="dakuanser(scope.row, scope.row.isPay ? false : true)">{{ scope.row.isPay ? "已打款" : "打款" }}</el-button>
          </el-tooltip>

          <el-button v-if="state.hasPermission('api:salary:delete')" type="primary" link @click="state.deleteHandle(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <p class="z9 mt10">注意：导入的日期格式为 <span class="red">年/月/日</span></p>
    <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit" :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle" @current-change="state.pageCurrentChangeHandle"> </el-pagination>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update ref="addOrUpdateRef" @refreshDataList="state.getDataList">确定</add-or-update>
  </div>
</template>

<script lang="ts" setup>
import useView from "@/hooks/useView";
import { reactive, ref, toRefs } from "vue";
import AddOrUpdate from "./salary-add-or-update.vue";
import { transferTimeYMD, dxget, apiurl, dxpost } from "@/utils/utils";
import { ElMessage, ElMessageBox } from "element-plus";
const xczxtrt = ref([]);
const view = reactive({
  deleteIsBatch: true,
  getDataListURL: "/sys/salary/page",
  getDataListIsPage: true,
  exportURL: "/api/salary/export",
  deleteURL: "/api/salary"
});

const state = reactive({ ...useView(view), ...toRefs(view) });

const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addOrUpdateRef.value.init(id);
};
const kxcsdf = (data, key) => {
  data = JSON.parse(data);
  return data[key];
};

const jmkxcf = async () => {
  const { list } = await dxget("/api/user/page", {
    limit: 999,
    isAuthentication: true
  });
  xczxtrt.value = list;
};
jmkxcf();
const successHandle = (data) => {
  console.log(data);
  if (data.code >= 1000) {
    ElMessage.error(data.msg);
    return;
  }
  window.location.reload();
};
const jiesuan = async (data) => {
  await dxpost(
    "/api/salary",
    {
      id: data.id,
      isPass: 2
    },
    "put"
  );
  data.isPass = 2;
};
const dakuanser = async (data, isPay) => {
  if (!isPay) {
    return;
  }
  await dxpost(
    "/api/salary",
    {
      id: data.id,
      isPay
    },
    "put"
  );
  data.isPay = isPay;
};
const doanwetr = () => {
  window.location.href = "https://duxinggj-1251133427.cos.ap-guangzhou.myqcloud.com/util/moban.xlsx";
};
</script>
